<template>
  <div id="app">
    <div>
        <!-- <router-view/> -->
    <!-- 路由视图  接收ranklist组件 和searchMusic组件的音乐id--> 
        <router-view @get-player-id="getPlayerId" @get-player-all-id="getAllId"></router-view>
    </div> 
          <!-- 播放音乐 -->       
        <player  :list-id="listId" v-show="playerId" :player-id="playerId" @item-out="musicOut" @get-player-id="getPlayerId"></player>   
  </div>
</template>
<script>
import Player from "@/components/public/Player.vue"

export default {
  components:{
    Player,
  },
  data() {
    return{
      playerId: null,
      listId:null,
      ismusicOut:false,
    }
  },
 
      methods:{
        //获取歌曲id (来自RankList组件的歌曲id)
        getPlayerId(id){
          
          this.playerId = id;
        },
        //音乐关闭 退出音乐控件
        // @item-out="musicOut"
        musicOut(status) {
          if(status) {
            let delayer=setTimeout(() => {
              //让播放控件消失 
              this.playerId=null;
              clearTimeout(delayer);
            }, 2500);

          }
        },
        //来自RankList组件的歌单id
        getAllId(id) {
          // 
          this.listId=id;
        }
      }
}
</script>
<style lang="less">

#app {
  height:100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

//文本过长溢出省略显示
.one-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auto-img{
  width:100%;
  display:block;
}

</style>
